<template>
  <div>
    <!--     搜索条件-->
    <SearchForm @search="getTableData" @reset="resetSearchForm" :isSearchDisabled="isSearchDisabled">
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('订单编号')" prop="recordId">
          <el-input v-model="page.recordId"></el-input>
        </el-form-item>
      </el-col>
      <!--      <el-col :span="8" :xs="24">-->
      <!--        <el-form-item :label="$t('用户姓名')" prop="userName">-->
      <!--          <el-input v-model="page.userName"></el-input>-->
      <!--        </el-form-item>-->
      <!--      </el-col>-->
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('手机号码')" prop="userPhone">
          <el-input v-model="page.userPhone"/>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('提醒状态')" prop="status">
          <el-select style="width: 100%" v-model="page.status" clearable>
            <el-option v-for="item in statusList" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <!--      <el-col :span="8" :xs="24">-->
      <!--        <el-form-item :label="$t('用户状态')" prop="isRepeatedBorrowing">-->
      <!--          <el-select style="width: 100%" v-model="page.isRepeatedBorrowing" clearable>-->
      <!--            <el-option :label="$t('初借')" :value="0"></el-option>-->
      <!--            <el-option :label="$t('复借')" :value="1"></el-option>-->
      <!--          </el-select>-->
      <!--        </el-form-item>-->
      <!--      </el-col>-->
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('联系结果')" prop="lastContactResult">
          <el-select style="width: 100%" v-model="page.lastContactResult" clearable>
            <el-option v-for="item in contactList" :key="item.key" :label="item.value"
                       :value="item.key"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24" v-show="$permiss[1067]">
        <el-form-item :label="$t('APP名称')" prop="productName">
          <el-select style="width: 100%" v-model="page.productName" clearable>
            <el-option v-for="item in productList" :key="item.productId" :label="item.appName"
                       :value="item.productName"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24" v-show="$permiss[1068]">
        <el-form-item :label="$t('客群名称')" prop="guestGroupId">
          <el-select style="width: 100%" v-model="page.guestGroupId" clearable>
            <el-option v-for="item in guestGroupList" :key="item.guestGroupId" :label="item.guestGroupName"
                       :value="item.guestGroupId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-form-item :label="$t('应还时间')" prop="shouldTimeValue">
          <el-date-picker
              v-model="page.shouldTimeValue"
              style="width: 100%"
              type="daterange"
              range-separator="~"
              value-format="yyyy-MM-dd"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-form-item :label="$t('联系时间')" prop="contactTimeValue">
          <el-date-picker
              v-model="page.contactTimeValue"
              style="width: 100%"
              type="daterange"
              range-separator="~"
              value-format="yyyy-MM-dd"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')">
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-form-item :label="$t('实还时间')">
          <el-date-picker
              v-model="page.actualRefundTimeValue"
              style="width: 100%"
              type="daterange"
              unlink-panels
              range-separator="~"
              value-format="yyyy-MM-dd"
              :start-placeholder="$t('开始时间')"
              :end-placeholder="$t('结束时间')">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </SearchForm>


    <el-card shadow="never" style="margin-top: 10px">
      <Table :page="page" row-key="id" :table-column="tableColumn" :table-data="tableData"
             :loading="loading"
             @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange">
        <!--        <template slot="recordId" slot-scope="scope">-->
        <!--          <el-link v-if="$permiss[1104]" :underline="false" type="primary" @click="goOrderDetails(scope.row)">-->
        <!--            {{ scope.row.recordId }}-->
        <!--          </el-link>-->
        <!--          <span v-else>{{ scope.row.recordId }}</span>-->
        <!--        </template>-->

        <template slot="handle" slot-scope="scope">
          <el-button type="text" v-show="$permiss[1136]" @click="lookRecord(scope.row)">{{ $t('备注') }}</el-button>
        </template>
      </Table>
    </el-card>
    <!--     备注记录-->
    <Dialog :visible.sync="visibleRecord" :title="$t('提醒记录')" width="60%" :footer="false">
      <el-form label-width="80px" :model="recordPage" ref="recordPage">
        <el-row :gutter="24">
          <el-col :span="16">
            <el-form-item :label="$t('操作时间')" prop="operationTimeValue">
              <el-date-picker
                  v-model="recordPage.operationTimeValue"
                  style="width: 100%"
                  type="daterange"
                  range-separator="~"
                  value-format="yyyy-MM-dd"
                  :start-placeholder="$t('开始时间')"
                  :end-placeholder="$t('结束时间')">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24" style="text-align: right">
            <el-button type="primary" @click="getRecord">{{ $t('查询') }}</el-button>
            <el-button @click="resetRecordSearch">{{ $t('重置') }}</el-button>
          </el-col>
        </el-row>
      </el-form>
      <Table :page="recordPage" :table-data="recordTableData" :table-column="recordTableColumn"
             @handleSizeChange="recordSizeChange" @handleCurrentChange="recordCurrentChange"></Table>
    </Dialog>
  </div>
</template>

<script>
import {dateFormatSection, deepClone, reasonTagsList} from "@/utils/tools";
import {mapGetters} from 'vuex'
import {todayExpireCompletedList, todayExpireResultList, guestGroupList} from '@/api/postLoan'
import {selectProduct} from "@/api/system";
import {getUserPhone} from '@/api/user'

export default {
  name: 'remindAgencyOrder',
  data() {
    const {collectionList} = reasonTagsList()
    return {
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        isAgency: 3,
        contactTimeValue: null,
      },
      guestGroupList: [],
      productList: [],
      tableData: [],
      tableColumn: [
        {label: this.$t('订单编号'), prop: 'recordId', align: 'center', fixed: "left", minWidth: 200},
        {label: this.$t('客群名称'), prop: 'guestGroupName', align: 'center',},
        {label: this.$t('用户姓名'), prop: 'userName', align: 'center',},
        {label: this.$t('手机号码'), prop: 'userPhone', align: 'center', width: 100},
        {label: this.$t('结清次数'), prop: 'settleNumber', align: 'center',},
        {label: this.$t('应还时间'), prop: 'refundDate', align: 'center', width: 150},
        {label: this.$t('合同金额'), prop: 'passAmount', align: 'center',},
        {label: this.$t('打款金额'), prop: 'paymentAmount', align: 'center',},
        {label: this.$t('应还金额'), prop: 'refundAmount', align: 'center',},
        {label: this.$t('已还金额'), prop: 'actualPayAmount', align: 'center',},
        {label: this.$t('减免金额'), prop: 'remissionAmount', align: 'center',},
        {label: this.$t('剩余应还金额'), prop: 'surplusRefundAmount', align: 'center', width: 100},
        {label: this.$t('最近联系时间'), prop: 'lastContactTime', align: 'center', width: 150},
        {label: this.$t('与借款人关系'), prop: 'contactObject', align: 'center', width: 150},
        {label: this.$t('联系结果'), prop: 'lastContactResult', align: 'center',},
        {label: this.$t('提醒状态'), prop: 'status', align: 'center', width: 100},
        {label: this.$t('提醒员'), prop: 'adminUserName', align: 'center',},
        {label: this.$t('实还时间'), prop: 'actualRefundDate', align: 'center', width: 150},
        {label: this.$t('APP名称'), prop: 'appName', align: 'center',},
        // {
        //   label: this.$t('操作'),
        //   slot: 'handle',
        //   align: 'center',
        //   fixed: 'right',
        //   minWidth: 100,
        //   isHide: !this.$permiss[1136]
        // },
      ],
      statusList: [
        {label: this.$t('已还款'), value: 1},
        {label: this.$t('展期'), value: 2},
        // {label: this.$t('结束'), value: 3},
      ],
      loading: false,
      contactList: collectionList,
      relationList: [
        {label: this.$t('本人'), value: 1},
        {label: this.$t('配偶'), value: 8},
        {label: this.$t('父亲'), value: 2},
        {label: this.$t('母亲'), value: 3},
        {label: this.$t('兄弟'), value: 4},
        {label: this.$t('姐妹'), value: 5},
        {label: this.$t('同事'), value: 6},
        {label: this.$t('朋友'), value: 7},
      ],
      tagsList: [],
      visibleRecord: false,
      tableRows: {},
      recordPage: {
        page: 1,
        pageSize: 10,
        total: 0
      },
      recordTableData: [],
      recordTableColumn: [
        {label: this.$t('操作时间'), prop: 'createTime', align: 'center', minWidth: 150},
        {label: this.$t('操作人'), prop: 'adminUserName', align: 'center', minWidth: 100},
        {label: this.$t('手机号'), prop: 'phone', align: 'center', minWidth: 150},
        {label: this.$t('与借款人关系'), prop: 'contactObject', align: 'center', minWidth: 150},
        {label: this.$t('结果'), prop: 'resultType', align: 'center', minWidth: 150},
        {label: this.$t('承诺还款时间'), prop: 'admitTime', align: 'center', minWidth: 150},
        {label: this.$t('备注'), prop: 'remarks', align: 'center', minWidth: 150},
      ],
      visibleAddRecord: false,
      recordForm: {
        contactObject: 1
      },
      isSearchDisabled: false
    }
  },
  watch: {
    loanRecordId: {
      immediate: true,
      handler(value) {
        if (value) {
          this.$set(this.page, 'recordId', value)
          this.getTableData()
          this.$store.commit('SET_MESSAGE_ORDERID', null)
        }
      }
    }
  },
  mounted() {
    this.getTableData()
    // 0 提醒
    guestGroupList({
      pageNum: 1,
      pageSize: 100,
      type: 0
    }).then(res => {
      this.guestGroupList = res.data.list
    })
    // 产品列表
    selectProduct().then(res => {
      this.productList = res.data
    })
  },
  computed: {
    ...mapGetters(['loanRecordId'])
  },
  methods: {
    async getTableData() {
      this.loading = true
      this.isSearchDisabled = true
      const [lastContactTimeStart, lastContactTimeEnd] = dateFormatSection(this.page.contactTimeValue)
      const [refundDateStart, refundDateEnd] = dateFormatSection(this.page.shouldTimeValue)
      const [actualRefundDateStart, actualRefundDateEnd] = dateFormatSection(this.page.actualRefundTimeValue)
      const params = Object.assign({}, this.page, {
        refundDateStart,
        refundDateEnd,
        lastContactTimeStart,
        lastContactTimeEnd,
        actualRefundDateStart, actualRefundDateEnd,
      })
      delete params.shouldTimeValue
      delete params.contactTimeValue
      const res = await todayExpireCompletedList(params)
      if (res.code === 1) {
        const {list, total} = res.data
        const {collectionList, collectionTagsList} = reasonTagsList()
        this.tableData = list.map(item => {
          item.status = this.statusList.filter(val => item.status === val.value)[0].label
          const contactResult = collectionList.filter(v => item.lastContactResult === v.key)
          const tagsValue = collectionTagsList.filter(v => item.labelList === v.key)
          const contactObject = this.relationList.filter(i => i.value === item.contactObject)
          item.lastContactResult = contactResult.length && tagsValue.length ? contactResult[0].value + ' - ' + tagsValue[0].value : contactResult.length && tagsValue.length === 0 ? contactResult[0].value : ""
          item.contactObject = contactObject.length ? contactObject[0].label : ''
          return item
        })
        this.page = Object.assign({}, this.page, {
          total: total
        })
        this.loading = false
        this.isSearchDisabled = false
      } else {
        this.loading = false
        this.isSearchDisabled = false
      }
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getTableData()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getTableData()
    },
    recordSizeChange(val) {
      this.recordPage.pageSize = val
      this.getRecord()
    },
    recordCurrentChange(val) {
      this.recordPage.pageNum = val
      this.getRecord()
    },
    // 打电话
    async callPhone({userStubId}) {
      const res = await getUserPhone({userStubId: userStubId})
      if (res.code === 1) {
        const a = document.createElement('a')
        a.href = 'sip:' + res.data.phone + ',' + new Date().getTime()
        a.click()
        document.body.removeChild(a)
      }
    },
    resetSearchForm() {
      this.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        isAgency: 1,
      }
      this.getTableData()
    },
    resetRecordSearch() {
      this.recordForm = {
        contactObject: 1
      }
      this.$refs.recordPage.resetFields()
      this.getRecord()
    },
    async lookRecord(row) {
      this.tableRows = deepClone(row)
      await this.getRecord()
      this.visibleRecord = true
    },
    // go订单详情
    goOrderDetails(row) {
      this.$router.push({
        path: '/order/orderDetails',
        query: {
          userStubId: row.userStubId,
          userId: row.userId,
          approvalId: row.approvalId,
          orderId: row.recordId,
          permissId: 1104
        }
      })
    },
    // 清空提醒记录
    clearRecordForm() {
      this.tagsList = []
      this.recordForm = {}
      this.$refs.recordForm.resetFields()
    },
    async getRecord() {
      const operationTimeValue = dateFormatSection(this.recordPage.operationTimeValue)
      const params = Object.assign({}, this.recordPage, {
        loanRecordId: this.tableRows.recordId,
        createDateStart: operationTimeValue && operationTimeValue.length > 1 ? operationTimeValue[0] : undefined,
        createDateEnd: operationTimeValue && operationTimeValue.length > 1 ? operationTimeValue[1] : undefined,
      })
      const res = await todayExpireResultList(params)
      if (res.code === 1) {
        const {list, pageSize, total, pageNum} = res.data
        this.recordTableData = list.map(item => {
          const {collectionList, collectionTagsList} = reasonTagsList()
          const contactResult = collectionList.filter(v => item.resultType === v.key)
          const tagsValue = collectionTagsList.filter(v => item.labelList === v.key)
          const contactObject = this.relationList.filter(i => i.value === item.contactObject)
          item.resultType = contactResult.length && tagsValue.length ? contactResult[0].value + ' - ' + tagsValue[0].value : contactResult.length && tagsValue.length === 0 ? contactResult[0].value : ""
          item.contactObject = contactObject.length ? contactObject[0].label : ''
          return item
        })
        this.recordPage = Object.assign({}, this.recordPage, {
          pageNum: pageNum,
          pageSize: pageSize,
          total: total
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
